<template lang="pug">
q-layout.err404-container
  .err404__space.fixed

  q-page-container
    q-page.err404.flex.flex-center.text-center.text-white
      div
        .err404__hero.flex.flex-center.no-wrap.q-gutter-sm
          div 4
          img(src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg")
          div 4
        .err404__punch-line You're not intentionally heading for a black hole, are you?
        q-btn.q-mt-md(no-caps color="white" text-color="primary" to="/" label="Take me home" push)

      landing-top-bar.err404__topbar
</template>

<script>
import LandingTopBar from 'components/page-parts/landing/LandingTopBar'

export default {
  name: 'Error404',

  meta: {
    title: 'Oops..'
  },

  components: {
    LandingTopBar
  }
}
</script>

<style lang="sass">
.err404-container
  background: #111

.err404
  min-height: 100vh !important

  &__topbar
    display: flex
    justify-content: center

    > div
      position: relative
      max-width: 1040px
      width: 100%

  &__space
    width: 400vw
    height: 400vh
    top: 50%
    left: 50%
    margin-top: -200vh
    margin-left: -200vw
    animation: err-logo-rotate 200s linear infinite
    background-size: 240px
    backface-visibility: visible
    background-image: url()

  &__hero
    font-size: 150px

    img
      width: 1em
      height: 1em
      animation: err-logo-rotate 80s linear infinite

@keyframes err-logo-rotate
  100%
    transform: rotate(-360deg)
</style>
